import  React ,{ FC,useRef } from 'react';
import {Space, Button,Typography,Input,Tooptip,message,Popover} from 'antd'
import {InputRef} from 'antd';
import { LeftOutlined,CopyOutlined,QRCodeOutlined} from '@ant-design/icons';
import {useNavigate,useParams}  from 'react-router-dom';
import styles from './StatHeader.module.scss';
import useGetPageInfo from '../../../hooks/useGetPageInfo';
import { QRCode } from 'qrcode.react'
const { Title } = Typography;

const StatHeader: FC = () =>{
    const nav=useNavigate();
    const {title,isPublished}=useGetPageInfo();

    //拷贝链接
    const urlInputRef=useRef<InputRef>(null);
    function copy(){
        //拷贝
        const elem=urlInputRef.current
        if(elem==null) return 
        elem.select();//选中input内容
        document.execCommand('copy');//执行选中内容
        message.success('拷贝成功')
    }
    
    function genLinkAndQRCodeElem(){
        if(!isPublished) return null
        const  url=`http://localhost:3000/question/${id}`
        //定义二维码组件
        const QRCodeElem= <div style={{textAlign:'center'}}>
            <QRCode value={url} size={150}></QRCode>
        </div>

        return <Space>
            <Input value={url} style={{width:'300px'}} ref={InputRef} />
            <Tooptip title='拷贝链接'>
                <Button icon={<CopyOutlined></CopyOutlined>} onClick={copy}></Button>
            </Tooptip>
            <Popover content={QRCodeElem}>
                <Button icon={<QRCodeOutlined></QRCodeOutlined>}></Button>
            </Popover>
        </Space>
    }


    const {id}=useParams();

    return <div className={styles['header-wrapper']}> 
        <div className={styles.header}>
            <div className={styles.left}>
                <Space>
                    <Button type="link" icon={<LeftOutlined></LeftOutlined>} 
                    onClick={()=>nav(-1)}
                    >返回</Button>
                    {/* <Title>{title}</Title> */}
                </Space>
            </div>
            <div className={styles.main}>{genLinkAndQRCodeElem()}</div>
            <div className={styles.right}>
                <Button type="primary" onClick={()=>{nav(`/question/edit/${id}`)}}>编辑问卷</Button>
            </div>

        </div>
    
    
    </div>
}

export default StatHeader;